Completed
Pull Request — master (#99)
by Johan
01:15
created

svg.js ➔ ... ➔ ???   A

Complexity

Conditions 1
Paths 1

Size

Total Lines 5

Duplication

Lines 5
Ratio 100 %

Importance

Changes 7
Bugs 0 Features 0
Metric Value
cc 1
c 7
b 0
f 0
nc 1
nop 3
dl 5
loc 5
rs 9.4285
1
import merge from "../help/merge.js";
2
import {calculateEncodingAttributes, getTotalWidthOfEncodings, getMaximumHeightOfEncodings} from "./shared.js";
3
4
var svgns = "http://www.w3.org/2000/svg";
5
6 View Code Duplication
class SVGRenderer{
0 ignored issues
show
Duplication introduced by
This code seems to be duplicated in your project.
Loading history...
7
	constructor(svg, encodings, options){
8
		this.svg = svg;
9
		this.encodings = encodings;
10
		this.options = options;
11
	}
12
13
	render(){
14
		var currentX = this.options.marginLeft;
15
16
		this.prepareSVG();
17
		for(let i = 0; i < this.encodings.length; i++){
18
			var encoding = this.encodings[i];
19
			var encodingOptions = merge(this.options, encoding.options);
20
21
			var group = createGroup(currentX, encodingOptions.marginTop, this.svg);
22
23
			setGroupOptions(group, encodingOptions);
24
25
			this.drawSvgBarcode(group, encodingOptions, encoding);
26
			this.drawSVGText(group, encodingOptions, encoding);
27
28
			currentX += encoding.width;
29
		}
30
	}
31
32
	prepareSVG(){
33
		// Clear the SVG
34
		while (this.svg.firstChild) {
35
			this.svg.removeChild(this.svg.firstChild);
36
		}
37
38
		calculateEncodingAttributes(this.encodings, this.options);
39
		var totalWidth = getTotalWidthOfEncodings(this.encodings);
40
		var maxHeight = getMaximumHeightOfEncodings(this.encodings);
41
42
		var width = totalWidth + this.options.marginLeft + this.options.marginRight;
43
		this.setSvgAttributes(width, maxHeight);
44
	}
45
46
	drawSvgBarcode(parent, options, encoding){
47
		var binary = encoding.data;
48
49
		// Creates the barcode out of the encoded binary
50
		var yFrom;
51
		if(options.textPosition == "top"){
52
			yFrom = options.fontSize + options.textMargin;
53
		}
54
		else{
55
			yFrom = 0;
56
		}
57
58
		var barWidth = 0;
59
		var x = 0;
60
		for(var b = 0; b < binary.length; b++){
61
			x = b * options.width + encoding.barcodePadding;
62
63
			if(binary[b] === "1"){
64
				barWidth++;
65
			}
66
			else if(barWidth > 0){
67
				drawLine(x - options.width * barWidth, yFrom, options.width * barWidth, options.height, parent);
68
				barWidth = 0;
69
			}
70
		}
71
72
		// Last draw is needed since the barcode ends with 1
73
		if(barWidth > 0){
74
			drawLine(x - options.width * (barWidth - 1), yFrom, options.width * barWidth, options.height, parent);
75
		}
76
	}
77
78
	drawSVGText(parent, options, encoding){
79
		var textElem = document.createElementNS(svgns, 'text');
80
81
		// Draw the text if displayValue is set
82
		if(options.displayValue){
83
			var x, y;
84
85
			textElem.setAttribute("style",
86
				"font:" + options.fontOptions + " " + options.fontSize + "px " + options.font
87
			);
88
89
			if(options.textPosition == "top"){
90
				y = options.fontSize - options.textMargin;
91
			}
92
			else{
93
				y = options.height + options.textMargin + options.fontSize;
94
			}
95
96
		// Draw the text in the correct X depending on the textAlign option
97
			if(options.textAlign == "left" || encoding.barcodePadding > 0){
98
				x = 0;
99
				textElem.setAttribute("text-anchor", "start");
100
			}
101
			else if(options.textAlign == "right"){
102
				x = encoding.width - 1;
103
				textElem.setAttribute("text-anchor", "end");
104
			}
105
		// In all other cases, center the text
106
		else{
107
				x = encoding.width / 2;
108
				textElem.setAttribute("text-anchor", "middle");
109
			}
110
111
			textElem.setAttribute("x", x);
112
			textElem.setAttribute("y", y);
113
114
			textElem.appendChild(document.createTextNode(encoding.text));
115
116
			parent.appendChild(textElem);
117
		}
118
	}
119
120
121
	setSvgAttributes(width, height){
122
		var svg = this.svg;
123
		svg.setAttribute("width", width + "px");
124
		svg.setAttribute("height", height + "px");
125
		svg.setAttribute("x", "0px");
126
		svg.setAttribute("y", "0px");
127
		svg.setAttribute("viewBox", "0 0 " + width + " " + height);
128
129
		svg.setAttribute("xmlns", svgns);
130
		svg.setAttribute("version", "1.1");
131
132
		svg.style.transform = "translate(0,0)";
133
134
		if(this.options.background){
135
			svg.style.background = this.options.background;
136
		}
137
	}
138
}
139
140
141
142
function createGroup(x, y, parent){
143
	var group = document.createElementNS(svgns, 'g');
144
145
	group.setAttribute("transform", "translate(" + x + ", " + y + ")");
146
147
	parent.appendChild(group);
148
149
	return group;
150
}
151
152
function setGroupOptions(group, options){
153
	group.setAttribute("style",
154
		"fill:" + options.lineColor + ";"
155
	);
156
}
157
158
function drawLine(x, y, width, height, parent){
159
	var line = document.createElementNS(svgns, 'rect');
160
161
	line.setAttribute("x", x);
162
	line.setAttribute("y", y);
163
	line.setAttribute("width", width);
164
	line.setAttribute("height", height);
165
166
	parent.appendChild(line);
167
}
168
169
export default SVGRenderer;
170